<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap_v3.css"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/transtion.css">
    <link rel="stylesheet" type="text/css" href="css/about.css"/>
    <link rel="stylesheet" type="text/css" href="css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="css/search.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
  
    <title>or关于我们</title>
    

  
</head>
<style>
    #jiantou_a:checked ~ul{
            display: flex;
            display: -webkit-flex;
    }
    #left_nav{
                display:none;
    }
    #left_nav:checked~.web_nav{
                   /* transform: translateX(0%); */
                   display: block;
    }
    #right_search{
                display: none;
        }
        #right_search:checked~.search{
                transform: translateX(0%);
    }
</style>
<body onload="load()">
                <!--loading-->
                <div id="loading">
                                <span>L</span>
                                <span>O</span>
                                <span>A</span>
                                <span>D</span>
                                <span>I</span>
                                <span>N</span>
                                <span>G</span>
                        </div>
                        <!--loading结束标签-->
        <input type="checkbox" id="left_nav">
        <input type="checkbox" id="right_search">
        <div class="web_nav bounceInLeft">
                <div class="nav_box">
                        <label for="left_nav">
                            <img src="images/close.png">
                        </label>
                        <ul class="ui">
                            <li><img src="images/xinlang2.png"></li>
                            <li><img src="images/wechat2.png"></li>
                            <li><img src="images/baidu2.png"></li>
                            <li><img src="images/xiangji2.png"></li>
                        </ul>
                        <ul class="daohang">
                                        <a href="about.html">About Or</a>
                                        <a href="canpin.html">Product</a>
                                        <a href="admin.html">Space Inspiration</a>
                                        <a href="huodong.html">User Experience</a>
                        </ul>
                        </ul>
                        <ul class="line_content">
                                <li class="one">news</li>
                                <li class="two">event</li>
                                <li class="three">contact</li>
                        </ul>
                </div>
        </div>
        <div class="search">
                <div class="r_eturn">
                        <label for="right_search">
                            <img src="images/return.png">
                        </label>
                        <span>Return</span>
                </div>
                <input type="text" placeholder="搜索" autofocus>
                <p>Searh anything & hit enter</p>
        </div>
    <div class="web">
        <header>
                <label for="left_nav" class="left">
                 
                        <span></span>
                        <span></span>
                        <span></span>
                  
                </label>
                <a href="index.html" class="logo">
                        <img src="images/logo2_03.jpg">
                   </a>
                  <label for="right_search" class="right">
                        <img src="images/sousuo.png">
                  </label>  
            </header>
            <div class="content">

                    <!--box-->
                    <div class="about_box">
                            <h1>About Or</h1>
                            <p>Founded in 2015, Or (Original relationship) tactfully integrates the simplistic design into everyday life, brings people with simple, aesthetic, relaxed and comfortable home design products and reconnects home products, people and life.</p>
                            <a href="lianxi.html" class="imga"><img src="images/about1_03.jpg"></a>
                            <div class="imga_box">
                                    <a href="lianxi.html"><img src="images/about2_07.jpg"></a>
                                    <a href="lianxi.html"><img src="images/about2_09.jpg"></a>
                            </div>
                            <h1 class="title2">Design</h1>
                            <p>is more than the beauty of objects that you see with naked eyes. Its essence lies in simplifying production process through design, so as to reduce product cost and allow people to enjoy quality products at a fair price.</p>
                            <div class="imgb_box">
                                    <a href="lianxi.html"><img src="images/about4_12.jpg"></a>
                                    <aside>
                                        <a href="lianxi.html"><img src="images/about5_13.jpg"></a>
                                        <a href="lianxi.html"><img src="images/about6_15.jpg"></a>
                                    
                                    </aside>
                            </div>
                            <h1 class="title3">Or Brand</h1>
                            <p class="t_right">values the inherent vitality of products, and brings passionate participation to life through its distinctive design intuition. Product design is just the beginning – we stress the attitude towards products in living space, and look forward to a more sincere interaction with consumers.</p>

                    </div>
                    <div class="bg_img">
                            <img src="images/about7_18.jpg">
                            <footer>
                                    <p>Copyright (c) Nissin Furniture Crafters Co ,Ltd All Rights Reserved</p>
                                    <div>
                                        <input type="checkbox" id="jiantou_a">
                                       
                                                <ul>
                                                    <li><img src="images/xinlang.png"></li>
                                                    <li><img src="images/wechat.png"></li>
                                                    <li><img src="images/baidu.png"></li>
                                                    <li><img src="images/xiangji.png"></li>
                                                </ul>
                                       
                                        <label for="jiantou_a">
                                                 <span><img src="images/jiantou.png"></span>
                                        </label>
                                    </div>
                            </footer>
                    </div>
            </div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script>
  
    /*动态改变根元素字体大小*/
    function recalc() {
        var clientWidth = document.documentElement.clientWidth;
        if(!clientWidth) return;
        document.documentElement.style.fontSize = 40 * (clientWidth / 1920) + 'px';
    }
    
    function initRecalc() {
        recalc();
        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
        if(!document.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
    }
    initRecalc();
    
     console.log("手机viewportWidth=",document.documentElement.clientWidth);
        //获取viewport宽
        var viewportWidth = document.documentElement.clientWidth;
        console.log(document.documentElement.style.fontSize);

        //loading
        function load(){
      var a= setTimeout("loading.style.transition='opacity 0.3s'",2000)   
      //设置透明度改变的过渡时间为0.3秒
      var b= setTimeout("loading.style.opacity=0",3000)
      //0.5秒后加载动画开始变为透明
      var c= setTimeout("loading.style.display='none'",4000)
      //当透明度为0的时候，隐藏掉它
}
    //logo变小
    var w=$(".content");

    $(w).scroll(function () {
                var logo = document.querySelector(".logo");
                var clientWidth = document.documentElement.clientWidth;
                if(clientWidth<=768){
                        return
                }else if(($(w).scrollTop()) > ($(w).height() - $(w).height())){
                        logo.style.width = 60 + 'px';
                }else{
                        logo.style.width = 150 + 'px';  
                }
   });
    </script>
  
    
</html>